<template>
	<view class="web">
		<view class="title">
			<!-- 导航 -->
			<view class="nav">
				<uni-nav-bar class="header" :border="false" left-icon="left" leftText="返回" title="房屋认证" />
			</view>
			<!-- 导航 -->
		</view>
		<!-- 房屋信息 -->
		<view class="house_text">房屋信息</view>
		<view class="house_box">
			<view class="house_content">
				<view class="content_t">
					<text>小区</text>
					<view @click="isshow = true">
						<text>{{ buildingData.length > 0 ? buildingData : '请选择小区' }}</text>
						<i class="iconfont icon-gengduo"></i>
					</view>
				</view>
				{{model}}
				<view class="content_t">
					<text>楼栋房号{{houstParams.buildingid}}</text>
					<view>
						<picker @change="houseChange" range-key="houseno" :value="houseIndex" :range="houseList">
							<view class="uni-input">{{houseIndex==null ? "请选择房间号" : houseList[houseIndex].houseno}}</view>
						</picker>
						<i class="iconfont icon-gengduo"></i>
					</view>
				</view>
				<view class="content_t">
					<text>住户类型</text>
					<view>
						<picker @change="userTypeChange" :value="userTypeIndex" :range="userinfoData" range-key="name">
							<view class="uni-input">{{userinfoData[userTypeIndex]?userinfoData[userTypeIndex].name:'请选择住户类型'}}</view>
						</picker>
						<!-- <text></text> -->
						<i class="iconfont icon-gengduo"></i>
					</view>
				</view>
			</view>
		</view>
		<!-- 房屋信息 -->
		<!-- 个人信息 -->
		<view class="house_text">个人信息</view>
		<view class="house_box_2">
			<view class="house_content">
				<view class="content_t">
					<text>姓名</text>
					<view class="rgt">
						<input type="text" v-model="model.name" placeholder="请填写姓名"/>
					</view>
				</view>
				<view class="content_t">
					<text>联系电话</text>
					<view class="rgt">
						<input type="text" v-model="model.mobile" placeholder="请填写联系电话"/>
					</view>
				</view>
			</view>
			<view @click="submit" class="btn">
				提交
			</view>
		</view>

		<!-- 个人信息 -->

		<selectBuilding v-if="isshow" @handconfirm="handconfirm"></selectBuilding>
	</view>
</template>

<script>
	import {
		userinfotype,getHouses
	} from '../../api/house.js'
	import {addUser} from '../../api/user.js'
	import selectBuilding from '../../commpoent/building/building.vue'
	export default {
		data() {
			return {
				model:{
					 
					                id: 0,
					                photo: "",
					                name: "",
					                houseid: 0,
					                usertype: 1,
					                sex: 1,
					                mobile: "",
					                usernative: "",
					                cardid: "",
					                nation: ""
					           
				},
				isshow: false,
				buildingData: [],
				array: ['中国', '美国', '巴西', '日本'],
				houseList: [],
				houseIndex: null,
				userTypeIndex:null,
				userinfoData: [],
				form: {

				},
				houstParams:{buildingid:0,page:1,psize:1000}
			}
		},
		components: {
			selectBuilding
		},
		onLoad() {
			this.getuserinfotype()
			this.form.mobile = uni.getStorageSync('menu').mobile
		},
		methods: {
			async submit(){
				
				const res=await addUser(this.model);
				if(res.errCode===10000){
					uni.setStorageSync("buildingState",1);
					uni.redirectTo({
						url:"/pages/house/house_4"
					})
				}
				console.log(res);
				
			},
			async getHouseList(){
				const res=await getHouses(this.houstParams);
				if(res.errCode===10000){
					this.houseList=res.data.list;
				}
			},
			handconfirm(val) {
				this.isshow = false
				if (val && val.length > 0) {
					 this.buildingData = val.map(item => item.name).join(' / ');
					// console.log(this.buildingData);
					//this.buildingData =val;
					this.houstParams.buildingid=val[val.length-1].id;
					this.getHouseList();
				}
			},
			houseChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.houseIndex = e.detail.value
				
				this.model.houseid=this.houseList[this.houseIndex].id;
			},
			
			// 住户
			userTypeChange: function(e) {
				this.userTypeIndex = e.detail.value
				this.model.usertype=this.userinfoData[this.userTypeIndex].id;
				this.form.usertypeName = this.userinfoData[this.userTypeIndex].id
			},

			// 获取住户类型
			async getuserinfotype() {
				let res = await userinfotype()
				console.log(res);
				this.userinfoData = res.data.list.map(item => {
					return {
						id: item.id,
						name: item.name
					}
				})
			}
		}
	}
</script>

<style>
	@import url('../../static/css/house_1.css');
</style>